<template>
  <div class="home">
    <!-- 导航栏 -->
    <div class="nav-wrapper">
      <nav class="navbar" style="background-color: #002e70;">
        <div class="nav-container">
          <!-- 左侧图标 -->
          <div class="nav-logo logo-left">
            <img src="../../assets/home/logo2.png" alt="Logo" style="height: 90px;">
          </div>

          <!-- 右侧导航菜单 -->
          <div class="nav-menu">
            <ul class="main-menu">
              <!-- 首页 -->
              <li :class="{ 'active': isActive('/') || $route.name === 'Home' }">
                <router-link to="/">首页</router-link>
                <div class="active-line"></div>
              </li>

              <!-- 应用中心 -->
              <li
                  :class="{
                  'active': activeMenu === 'application',
                  'has-submenu': true
                }"
                  @mouseenter="openSubmenu('application')"
                  @mouseleave="closeSubmenu"
              >
                <a @click="toRoute('AppCenter')">应用中心 </a>
                <div class="active-line"></div>
                <ul class="submenu" v-show="activeMenu === 'application'">
                    
                    
                  <li>
                    <a href="http://crm.metaverseants.com/login" target="_blank">蚁宝信链CRM</a>
                  </li>
                  <li>
                    <a href="http://admin.metaverseants.com" target="_blank">蚁宝信链后台</a>
                  </li>
                  <li>
                    <a href="http://oa.mdslyun.com/" target="_blank">OA系统</a>
                  </li>
                  <li>
                    <a href="https://shop.yamdyun.com/" target="_blank">迈迪优链商城</a>
                  </li>
                  <li>
                    <a href="https://shopmer.yamdyun.com/" target="_blank">云汇商城商户端</a>
                  </li>
                  <li v-if="false" >
                    <a href="https://erp.mdslyun.com/home" target="_blank">ERP系统</a>
                  </li>
                  <li>
                    <a href="http://120.46.12.231:8080/" target="_blank">一体化ERP平台</a>
                  </li>
                  <li>
                    <a href="https://erp.huizhuyun.com/" target="_blank">慧筑云</a>
                  </li>
                    

                    
                    
                  <li @click="toRoute('AppCenter')" v-if="false" ><a>精选应用</a></li>
                  <li @click="toRoute('ApplicationOpenPlatform')" v-if="false" ><a>应用开放平台</a></li>
                  <li class="disabled-menu-item" v-if="false" >
                    <a class="disabled-link">应用接口管理</a>
                  </li>
                </ul>
              </li>

              <!-- 产业赋能 -->
              <li
                  :class="{
                  'active': activeMenu === 'empowerment',
                  'has-submenu': true
                }"
                  @mouseenter="openSubmenu('empowerment')"
                  @mouseleave="closeSubmenu"
              >
                <a >产业赋能</a>
                <div class="active-line"></div>
                <ul class="submenu" v-show="activeMenu === 'empowerment'">
                  <li
                      class="has-submenu"
                      @mouseenter="openThirdMenu('brain')"
                      @mouseleave="closeThirdMenu"
                  >
                    <ul class="third-menu" v-show="activeThirdMenu === 'brain'">
                      <li><a href="https://cydn.mdslyun.com/" target="_blank" >产业大脑</a></li>
                      <li><a href="https://dnbd.mdslyun.com/" target="_blank" >产业大脑驾驶舱</a></li>
                      <li><a href="https://dnht.mdslyun.com/" target="_blank" >产业大脑管理端</a></li>
                    </ul>
                    <a href="https://cydn.mdslyun.com/home" target="_blank" >产业大脑</a>
                  </li>
                  <li @click="toRoute('IndustrialFinance')"><a>产业金融</a></li>
                  <li
                      class="has-submenu"
                      @mouseenter="openThirdMenu('policy')"
                      @mouseleave="closeThirdMenu"
                  >
                    <ul class="third-menu" v-show="activeThirdMenu === 'policy'">
                      <li @click="toRoute('PolicyType')"><a>政策类型</a></li>
                      <li  @click="toRoute('PolicyTopics')"><a>政策专题</a></li>
                      <li @click="toRoute('PolicySector')"><a>政策部门</a></li>
                    </ul>
                    <a>产业政策</a>
                  </li>
                  <li
                      class="has-submenu"
                      @mouseenter="openThirdMenu('supply')"
                      @mouseleave="closeThirdMenu"
                  >
                    <ul class="third-menu" v-show="activeThirdMenu === 'supply'">
                      <li @click="toRoute('SupplyServices')"><a>交易大厅</a></li>
                      <li @click="toRoute('ExpertResources')"><a>专家资源</a></li>
                      <li @click="toRoute('EnterpriseServiceProviders')"><a>企业服务商</a></li>
                      <li @click="toRoute('ScientificInstitutions')"><a>科研机构</a></li>
                    </ul>
                    <a >供需服务</a>
                  </li>
                  <li
                      class="has-submenu"
                      @mouseenter="openThirdMenu('case')"
                      @mouseleave="closeThirdMenu"
                  >
                    <ul class="third-menu" v-show="activeThirdMenu === 'case'">
                      <li @click="toRoute('IndustrySolutions')"><a>行业解决方案</a></li>
                      <li @click="toRoute('ScenarioSolutions')"><a>场景解决方案</a></li>
                      <li class="disabled-menu-item">
                        <a class="disabled-link">区域解决方案</a>
                      </li>
                    </ul>
                    <a @click="toRoute('IndustrySolutions')">赋能案例</a>
                  </li>
                  <li
                      class="has-submenu"
                      @mouseenter="openThirdMenu('park')"
                      @mouseleave="closeThirdMenu"
                  >
                    <ul class="third-menu" v-show="activeThirdMenu === 'park'">
                      <li class="disabled-menu-item">
                        <a class="disabled-link">沈阳永安机床小镇</a>
                      </li>
                      <li class="disabled-menu-item">
                        <a class="disabled-link">润丰智能制造产业园</a>
                      </li>
                      <li class="disabled-menu-item">
                        <a class="disabled-link">辽宁河北商会</a>
                      </li>
                    </ul>
                    <a>产业园子平台</a>
                  </li>
                </ul>
              </li>

              <!-- 行业协同 -->
              <li
                  :class="{
                  'active': activeMenu === 'collaboration',
                  'has-submenu': true
                }"
                  @mouseenter="openSubmenu('collaboration')"
                  @mouseleave="closeSubmenu"
              >
                <a @click="toRoute('IndustrySynergy')">行业协同</a>
                <div class="active-line"></div>
                <ul class="submenu" v-show="activeMenu === 'collaboration'">

                      <li>
                        <a href="https://cloud.yamdyun.com/" target="_blank">永安迈迪星链</a>
                      </li>
                      <li>
                        <a href="https://admin.yamdyun.com/" target="_blank">永安迈迪星链管理端</a>
                      </li>
                      <li>
                        <a href="https://cloud.mdslyun.com/" target="_blank">永安迈迪数链</a>
                      </li>
                      <li>
                        <a href="https://admin.mdslyun.com/" target="_blank">永安迈迪数链管理端</a>
                      </li>
                      <li>
                        <a href="https://cloud.node109.com/" target="_blank">万企互链</a><!--即迈迪智能-->
                      </li>
                      <li>
                        <a href="https://sso.node327.com/" target="_blank">盘锦二级节点</a>
                      </li>
                      <li>
                        <a href="https://manager.node327.com/" target="_blank">盘锦二级节点管理端</a>
                      </li>
                      <li class="disabled-menu-item">
                        <a href="https://sso.zdyl.shengu.com/" target="_blank"  class="disabled-link">沈鼓二级节点</a>
                      </li>
                      <li class="disabled-menu-item">
                        <a href="https://admin.zdyl.shengu.com/" target="_blank"  class="disabled-link">沈鼓二级节点管理端</a>
                      </li>
                      <li class="disabled-menu-item">
                        <a href="https://cloud.ansteelnode.com/" target="_blank" class="disabled-link">鞍钢二级节点</a>
                      </li>
                      <li class="disabled-menu-item">
                        <a href="https://admin.ansteelnode.com/" target="_blank" class="disabled-link">鞍钢二级节点管理端</a>
                      </li>
                </ul>
              </li>

              <!-- 关于我们 -->
              <li
                  :class="{
                  'active': isActive('/about') || $route.name === 'About',
                  'has-submenu': true
                }"
                  @mouseenter="openSubmenu('about')"
                  @mouseleave="closeSubmenu"
              >
                <router-link to="/AboutUs">关于我们</router-link>
                <div class="active-line"></div>
                <ul class="submenu" v-show="activeMenu === 'about'">
                  <li @click="toRoute('AboutUs')"><a>平台简介</a></li>
                  <li @click="toRoute('CompanyNewsList')"><a>企业动态</a></li>
<!--                  <li @click="toRoute('UserRegistration')"><a>用户注册</a></li>
                  <li @click="toRoute('SignUplogin')"><a>后台登陆</a></li> -->
                  <li><a href="https://sso.yamdyun.com/" target="_blank">用户注册</a></li>
                  <li><a href="https://sso.mdslyun.com/Acount/Login" target="_blank">后台登陆</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navBar',
  data() {
    return {
      activeMenu: null,
      activeThirdMenu: null
    }
  },
  methods: {
    isActive(path) {
      return this.$route.path === path
    },
    openSubmenu(menu) {
      this.activeMenu = menu
    },
    closeSubmenu() {
      this.activeMenu = null
      this.activeThirdMenu = null
    },
    openThirdMenu(menu) {
      this.activeThirdMenu = menu
    },
    closeThirdMenu() {
      this.activeThirdMenu = null
    },
    toRoute(name) {
      if (this.$route.name !== name) {
        this.$router.push({ name })
      }
      this.closeSubmenu()
    }
  }
}
</script>

<style scoped>
/* 导航栏容器 */
.nav-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Logo靠左 */
.logo-left {
  margin-left: 20px;
}

/* 导航栏基础样式 */
.navbar {
  height: 90px;
  color: white;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

.nav-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.nav-logo {
  margin-right: 40px;
}

.nav-menu {
  flex-grow: 1;
}

/* 主菜单样式 */
.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  align-items: center;
  cursor: pointer;
}

.main-menu > li {
  position: relative;
  margin-right: 30px;
  height: 100%;
  display: flex;
  align-items: center;
}

.main-menu > li > a,
.main-menu > li > router-link {
  color: #C4CFDE;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
}

/* 活动状态下的白线 */
.active-line {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: white;
  display: none;
}

/* 默认选中首页和活动状态 */
.main-menu > li.active .active-line,
.main-menu > li.router-link-exact-active .active-line,
.main-menu > li.router-link-active .active-line {
  display: block;
}

.main-menu > li.active > a,
.main-menu > li.active > router-link,
.main-menu > li.router-link-exact-active > a,
.main-menu > li.router-link-active > a {
  color: white;
}

/* 下拉菜单样式 */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  z-index: 100;
}

.submenu a {
  color: #333 !important;
  padding: 8px 20px;
  display: block;
  text-decoration: none;
}

.submenu a:hover {
  background-color: #f5f5f5;
}

/* 三级菜单样式 */
.third-menu {
  position: absolute;
  left: 100%;
  background-color: white;
  min-width: 200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  display: none;
}

.has-submenu:hover .third-menu {
  display: block;
}

/* 悬停效果 */
.has-submenu:hover .submenu {
  display: block;
}
.disabled-menu-item {
  cursor: default;
  opacity: 0.6;
}

.disabled-link {
  color: #999 !important;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}
</style>